<template>
  <div id="workbench">
    <section v-if="!finishLoading">
      <!-- 1 -->

      <!-- 2 -->
      <div class="workbench_live">
        <div class="workbench_live-left">
          <div class="live-left-top">
            <div class="notice">
              <div class="notice-box"></div>直播预告
            </div>
            <!-- <div class="more" @click="goPage(13)">更多></div> -->
          </div>
          <div class="live-left-content">
            <div
              class="left-content-item"
              v-for="(item, index) in yugaoList.slice(0, 3)"
              :key="'y' + index"
              @click="goDetails(item.author_id)"
            >
              <div class="item-box-img">
                <img :src="item.logo" v-errorImg:live />
              </div>
              <div class="item-box-info">
                <div class="nickname">{{ item.nickname }}</div>
                <div class="introduce">粉丝: {{ format_num(item.total_fans) }}</div>
                <div class="notice-time">
                  <img src="@/assets/shi/liveRoom.png" />
                  <span>直播预告</span>
                  <span>{{ timestamp(item.notice_time, "M-D h:m") }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="workbench_live-right">
          <div class="live-left-top">
            <div class="notice">
              <div class="notice-box"></div>热门直播
            </div>
            <!-- <div class="more" @click="goPage(13)">更多></div> -->
          </div>
          <div class="live-left-content">
            <div
              class="left-content-item"
              v-for="(item, index) in hotRoomShow.slice(0, 3)"
              :key="'y' + index"
              @click="goLive(item.room_id)"
            >
              <div class="item-box-img item-box-img2">
                <img :src="item.logo" v-errorImg:live />
                <div class="livingBox">
                  <p class="livingGif">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </p>
                  <span>直播中</span>
                </div>
              </div>
              <div class="item-box-info">
                <div class="nickname right-nickname">{{ item.nickname }}</div>
                <div class="introduce">粉丝: {{ format_num(item.total_fans) }}</div>
                <div class="notice-time">
                  <img src="@/assets/wang/live/live.png" />
                  <span>开播时间</span>
                  <span>{{ timestamp(item.begin_timestamp, "M-D h:m") }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 4 -->
      <div class="box05">
        <div class="refreshTime">
          <el-tooltip class="item" effect="light" placement="bottom-start" popper-class="mytooltip">
            <div class="tip-popup" slot="content">
              <p>在架商品分类统计</p>统计各分类商品近7天在抖音平台的浏览及销量数据,数据来源于抖音官方。
              <br />商品总数：抖音平台上对应分类下的所有商品数量
              <br />动销商品数：对应分类下进入过直播间且销量≠0的商品数
              <br />动销商品浏览量:该分类下销量≠0的商品近7日的抖音浏览量
              <br />抖音订单量:该分类下的商品近7日的抖音订单量
              <br />

              <p>直播间商品分类统计</p>统计各分类商品近7天在直播间内的销量及销售额数据
              <br />商品总数:对应分类下进入过直播间的商品总数
              <br />动销商品数:对应分类下进入过直播间且销量≠0的商品数
              <br />直播间销量:对应分类下近7日进入过直播间的商品总销量
              <br />直播间销售额:对应分类下近7日进入过直播间的商品总销售额
              <br />

              <p>达人分布</p>统计掌上数据收录的抖音平台的达人粉丝及行业数据
              <br />直播达人数:对应分类下近7天内开过直播间的达人总数
              <br />直播动销达人数:对应分类下近7天内开过直播间且直播间商品销量≠0的达人数
              <br />

              <p>达人画像</p>统计掌上数据收录的抖音平台的达人画像
              <br />
            </div>
            <img src="@/assets/meng/search_result04.png" alt class="whatImg" />
          </el-tooltip>
          <p>数据更新时间：每周二上午8:00</p>
        </div>

        <el-tabs v-model="activeName" class="box05_tabs">
          <el-tab-pane name="one" class="box05_tab-pane">
            <div slot="label" class="tabLable">
              <span>在架商品分类统计</span>
            </div>
            <div class="paneDiv">
              <div class="barDiv" id="barDiv" ref="barDiv">
                <StackBar
                  :xData="goodsxData"
                  :series1="goodsY1"
                  :series2="goodsY2"
                  :series3="goodsY3"
                  :series4="goodsY4"
                  :series5="goodsY5"
                  v-if="activeName == 'one' && showEch"
                />
                <!-- <img
                  class="watermark"
                  src="@/assets/shi/workbenchbgc.png"
                  alt=""
                />-->
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="two" class="box05_tab-pane">
            <div slot="label" class="tabLable">
              <span>直播间商品分类统计</span>
              <!-- <el-tooltip
                class="item"
                effect="light"
                placement="top"
                popper-class="mytooltip"
              >
                <div slot="content">
                  统计各分类商品近7天在直播间内的销量及销售额数据<br />
                  商品总数：对应分类下进入过直播间的商品总数<br />
                  动销商品数：对应分类下进入过直播间且销量≠0的商品数<br />
                  直播间销量：对应分类下近7日进入过直播间的商品总销量<br />
                  直播间销售额：对应分类下近7日进入过直播间的商品总销售额<br />
                </div>
                <img
                  src="@/assets/meng/search_result04.png"
                  alt=""
                  class="whatImg"
                />
              </el-tooltip>-->
            </div>
            <div class="paneDiv">
              <div class="top-switch">
                <div class="top-switch-wrap">
                  <div :class="{ native: changeCensus }" @click="changeCensus = true">直播间商品统计</div>
                  <div :class="{ native: !changeCensus }" @click="changeCensus = false">直播间销量统计</div>
                </div>
              </div>
              <div class="barDiv" ref="barDiv2" style="height: 440px" v-if="changeCensus">
                <StackBar02
                  :xData="goodslivexData"
                  :series1="goodsliveY1"
                  :series2="goodsliveY2"
                  :series3="goodsliveY3"
                  :series4="goodsliveY4"
                  v-if="activeName == 'two'"
                />
                <!-- <img
                  class="watermark"
                  src="@/assets/shi/workbenchbgc.png"
                  alt=""
                />-->
              </div>
              <div class="barDiv" ref="barDiv3" style="height: 440px" v-else>
                <LiveLine
                  :xData="goodslivexData"
                  :series3="goodsliveY3"
                  :series4="goodsliveY4"
                  v-if="activeName == 'two'"
                />
                <!-- <img
                  class="watermark"
                  src="@/assets/shi/workbenchbgc.png"
                  alt=""
                />-->
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="three" class="box05_tab-pane">
            <div slot="label" class="tabLable">
              <span>达人分布</span>
              <!-- <el-tooltip
                class="item"
                effect="light"
                placement="top"
                popper-class="mytooltip"
              >
                <div slot="content">
                  统计掌上数据收录的抖音平台的达人粉丝及行业数据<br />
                  达人总数：对应分类下的达人总数<br />
                  直播达人数：对应分类下近7天内开过直播间的达人总数<br />
                  直播动销达人数：对应分类下近7天内开过直播间且直播间商品销量≠0的达人数<br />
                </div>
                <img
                  src="@/assets/meng/search_result04.png"
                  alt=""
                  class="whatImg"
                />
              </el-tooltip>-->
            </div>
            <div class="paneDiv" ref="barDiv4">
              <div class="sageItem" style="padding-bottom: 40px; box-sizing: border-box">
                <div class="titleBox">
                  <!-- <img
                    src="@/assets/wang/work/job.png"
                    alt=""
                    class="iconImg"
                  />-->
                  <div class="iconImg-box"></div>
                  <span>达人行业分布</span>
                </div>
                <!-- <div class="barHorBox watermark-box" style="height: 384px"> -->
                <div class="barHorBox watermark-box" style="height: 90%">
                  <div class="barHor">
                    <StackBarHor
                      :xData="jobxData"
                      :series1="jobyData01"
                      :series2="jobyData02"
                      :series3="jobyData03"
                      v-if="activeName == 'three' && jobxData.length != 0"
                    />
                  </div>
                  <!-- <img
                    class="watermark"
                    src="@/assets/shi/workbenchbgc.png"
                    alt=""
                  />-->
                </div>
              </div>
              <div class="sageItem">
                <div class="titleBox">
                  <!-- <img
                    src="@/assets/wang/tdetails/fans.png"
                    alt=""
                    class="iconImg"
                  />-->
                  <div class="iconImg-box"></div>
                  <span>达人粉丝分布</span>
                </div>
                <div class="barHorBox">
                  <div class="talentFansBar">
                    <StackBarFans
                      :xData="fansxData"
                      :series1="fansyData1"
                      :series2="fansyData2"
                      :series3="fansyData3"
                      v-if="activeName == 'three'"
                    />
                    <!-- <img
                      class="watermark"
                      src="@/assets/shi/workbenchbgc.png"
                      alt=""
                    />-->
                  </div>
                  <div class="talentFansBar">
                    <StackBarFans1
                      :xData="fansxData"
                      :series1="fansyData1"
                      :series2="fansyData2"
                      :series3="fansyData3"
                      v-if="activeName == 'three'"
                    />
                    <!-- <img
                      class="watermark"
                      src="@/assets/shi/workbenchbgc.png"
                      alt=""
                    />-->
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="four" class="box05_tab-pane">
            <div slot="label" class="tabLable">
              <span>达人画像</span>
              <!-- <el-tooltip
                class="item"
                effect="light"
                placement="top"
                popper-class="mytooltip"
              >
                <div slot="content">统计掌上数据收录的抖音平台的达人画像</div>
                <img
                  src="@/assets/meng/search_result04.png"
                  alt=""
                  class="whatImg"
                />
              </el-tooltip>-->
            </div>
            <div class="paneDiv">
              <div class="sageItem sageItem-portrait1" id="bardiv6" ref="bardiv6">
                <div class="sageItem1" style="height: 30%">
                  <div class="titleBox">
                    <!-- <img
                    src="@/assets/wang/tdetails/Gender.png"
                    alt=""
                    class="iconImg"
                    />-->
                    <div class="iconImg-box"></div>
                    <span>性别分布</span>
                  </div>
                  <div class="talentPie" style="height: 140px">
                    <GenderSpread :pieData="pieGenderData" name="性别分布" v-if="activeName == 'four'" />
                  </div>
                </div>
                <div class="sageItem2" style="height: 70%">
                  <div class="titleBox">
                    <!-- <img
                    src="@/assets/wang/tdetails/live.png"
                    alt=""
                    class="iconImg"
                    />-->
                    <div class="iconImg-box"></div>
                    <span>发布视频数</span>
                  </div>
                  <div class="talentPie live-watermark" style="height: 100%">
                    <TalentPie :pieData="pieVideoData" name="发布视频数" v-if="activeName == 'four'" />
                    <!-- <img
                      class="watermark"
                      src="@/assets/shi/workbenchbgc.png"
                      alt=""
                    />-->
                  </div>
                </div>
              </div>
              <div class="sageItem sageItem-portrait2" ref="bardiv7">
                <div class="sageItem3" style="position: relative">
                  <div class="titleBox">
                    <!-- <img
                    src="@/assets/wang/tdetails/age.png"
                    alt=""
                    class="iconImg"
                    />-->
                    <div class="iconImg-box"></div>
                    <span>年龄分布</span>
                  </div>
                  <!-- <div
                    class="talentPie"
                    style="height: 404px; margin-top: 17px"
                  >-->
                  <div class="talentPie" style="height: 100%; margin-top: 17px">
                    <AgeSpread :pieData="pieAgeData" name="年龄分布" v-if="activeName == 'four'" />
                    <!-- <img
                      class="watermark"
                      src="@/assets/shi/workbenchbgc.png"
                      alt=""
                    />-->
                  </div>
                </div>
                <div class="sageItem4" style="position: relative">
                  <div class="titleBox">
                    <!-- <img
                    src="@/assets/shi/liveLink.png"
                    alt=""
                    class="iconImg"
                    />-->
                    <div class="iconImg-box"></div>
                    <span>关联直播数</span>
                    <el-tooltip
                      class="item"
                      effect="light"
                      placement="top"
                      popper-class="mytooltip"
                    >
                      <div slot="content">统计抖音平台上有直播记录的达人分布</div>
                      <img src="@/assets/meng/search_result04.png" alt class="whatImg01" />
                    </el-tooltip>
                  </div>
                  <!-- <div
                    class="talentPie"
                    style="height: 404px; margin-top: 17px"
                  >-->
                  <div class="talentPie" style="height: 100%; margin-top: 17px">
                    <LiveNumber :pieData="pieLiveData" name="关联直播数" v-if="activeName == 'four'" />
                    <!-- <img
                      class="watermark"
                      src="@/assets/shi/workbenchbgc.png"
                      alt=""
                    />-->
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 底部 -->
      <div class="box01">
        <div class="box01Left">
          <div class="left01">
            <p>直播分析</p>
            <div class="iconBox01">
              <div class="left01Item" @click="goPage(1)">
                <img src="@/assets/shi/gztfr1-1.png" class="pieIcon" />
                <p>流量大盘</p>
              </div>
              <div class="left01Item" @click="goPage(2)">
                <img src="@/assets/shi/gztfr1-2.png" class="dhIcon" />
                <p>带货直播间</p>
              </div>
              <div class="left01Item" @click="goPage(3)">
                <img src="@/assets/shi/gztfr1-3.png" class="pieIcon" />
                <p>直播搜索</p>
              </div>
            </div>
          </div>

          <div class="left01 videoItem">
            <p>达人分析</p>
            <div class="iconBox01">
              <div class="left01Item" @click="goPage(4)">
                <img src="@/assets/shi/gztfr1-4.png" class="bpIcon" />
                <p>粉丝榜</p>
              </div>
              <div class="left01Item" @click="goPage(5)">
                <img src="@/assets/shi/gztfr1-5.png" class="hotVideoIcon" />
                <p>星图达人榜</p>
              </div>
              <div class="left01Item" @click="goPage(6)">
                <img src="@/assets/shi/gztfr1-6.png" class="pieIcon" />
                <p>达人搜索</p>
              </div>
            </div>
          </div>

          <div class="left01 videoItem">
            <p>商品分析</p>
            <div class="iconBox01">
              <div class="left01Item" @click="goPage(7)">
                <img src="@/assets/shi/gztfr1-7.png" class="shopCartIcon" />
                <p>商品榜</p>
              </div>
              <div class="left01Item" @click="goPage(8)">
                <img src="@/assets/shi/gztfr1-8.png" class="pieIcon" />
                <p>带货视频榜</p>
              </div>
              <div class="left01Item" @click="goPage(9)">
                <img src="@/assets/shi/gztfr1-9.png" class="pieIcon" />
                <p>商品搜索</p>
              </div>
            </div>
          </div>

          <div class="left01 videoItem">
            <p>热门素材</p>
            <div class="iconBox01">
              <div class="left01Item" @click="goPage(10)">
                <img src="@/assets/shi/gztfr1-10.png" class="pieIcon" />
                <p>热门视频</p>
              </div>
              <div class="left01Item" @click="goPage(11)">
                <img src="@/assets/shi/gztfr1-11.png" class="pieIcon" />
                <p>热门音乐</p>
              </div>
              <div class="left01Item" @click="goPage(12)">
                <img src="@/assets/shi/gztfr1-12.png" class="pieIcon" />
                <p>热门话题</p>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="box01Right">
          <el-carousel height="163px">
            <el-carousel-item
              v-for="(item, index) in bannerList"
              :key="'a' + index"
            >
              <img :src="item.img" class="banner" />
            </el-carousel-item>
          </el-carousel>
        </div>-->
      </div>
      <!-- <my_footer /> -->
    </section>
    <div
      v-loading="finishLoading"
      v-if="finishLoading"
      class="loading loading01 finishLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
  </div>
</template>

<script>
import my_footer from '@/component/my_footer';
import StackBar from '@/pages/wang/workbench/stackBar';
import StackBar02 from '@/pages/wang/workbench/stackBar02';
import StackBarHor from '@/pages/wang/workbench/stackBarHor';
import StackBarFans from '@/pages/wang/workbench/stackBarFans';
import StackBarFans1 from '@/pages/wang/workbench/stackBarFans1';
import TalentPie from '@/pages/wang/workbench/talentPie';
import LiveLine from '@/pages/wang/workbench/liveLine';
import AgeSpread from '@/pages/wang/workbench/AgeSpread';
import LiveNumber from '@/pages/wang/workbench/LiveNumber';
import GenderSpread from '@/pages/wang/workbench/GenderSpread';

export default {
  name: '',
  components: {
    my_footer,
    StackBar,
    StackBar02,
    StackBarHor,
    StackBarFans,
    StackBarFans1,
    TalentPie,
    LiveLine,
    AgeSpread,
    LiveNumber,
    GenderSpread
  },
  data() {
    return {
      bannerList: [
        {
          img: require('@/assets/wang/work/banner.png')
        }
      ],
      changeCensus: true,
      isBlue01: false,
      isBlue02: false,
      isBlue03: false,
      showNum: false,
      startIndex: 0,
      endIndex: 6,
      hotRoomShow: [],
      cancel01: null,
      cancel02: null,
      yugaoList: [],
      roomList: [],
      finishLoading: true,
      activeName: 'one',
      // 达人行业分布
      jobxData: [],
      jobyData01: [],
      jobyData02: [],
      jobyData03: [],
      // 达人粉丝
      fansxData: [],
      fansyData1: [],
      fansyData2: [],
      fansyData3: [],
      // 性别分布
      pieGenderData: [],
      // 年龄分布
      pieAgeData: [],
      // 发布视频数
      pieVideoData: [],
      // 关联直播数
      pieLiveData: [],
      // 在架商品分类统计
      goodsxData: [],
      goodsY1: [],
      goodsY2: [],
      goodsY3: [],
      goodsY4: [],
      goodsY5: [],
      // 直播间商品分类
      goodslivexData: [],
      goodsliveY1: [],
      goodsliveY2: [],
      goodsliveY3: [],
      goodsliveY4: [],

      // 显示echarts
      showEch: false
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {
    this.$store.commit('change_left_nav_flag', true);
  },
  created() {
    this.getYuGao();
    this.getTalentJob();
    this.getTalentFans();
    this.getTalentDraw();
    this.getGoodsSum();
    this.getGoodsLiveSum();
  },
  mounted() {},

  methods: {
    setChartsHeight() {
      this.$nextTick(() => {
        // let boxTopVal = this.$refs.barDiv.offsetTop;
        if(!this.$refs.barDiv) return;
        let windowHeight = document.documentElement.clientHeight || window.innerHeight;
        let boxHeight = windowHeight - 467;
        let boxHeight2 = windowHeight - 487;
        let boxHeight3 = windowHeight - 467; //583
        let boxHeight4 = windowHeight - 485;
        this.$refs.barDiv.style.height = boxHeight + 'px';
        this.$refs.barDiv.style.minHeight = 450 + 'px';

        if (this.$refs.barDiv) {
          this.showEch = true;
        }
        if (this.$refs.barDiv2) {
          this.$refs.barDiv2.style.height = boxHeight2 + 'px';
          this.$refs.barDiv2.style.minHeight = 450 + 'px';
        }
        if (this.$refs.barDiv4) {
          this.$refs.barDiv4.style.height = boxHeight3 + 'px';
          this.$refs.barDiv4.style.minHeight = 470 + 'px';
        }
        // if(this.$refs.barDiv5){
        //   this.$refs.barDiv5.style.height = boxHeight3+'px';
        //   this.$refs.barDiv4.style.minHeight = 430+ 'px'
        // }
        document.querySelector('.sageItem-portrait1').style.height = boxHeight4 + 'px';
        document.querySelector('.sageItem-portrait1').style.minHeight = 450 + 'px';
        document.querySelector('.sageItem-portrait2').style.height = boxHeight4 + 'px';
        document.querySelector('.sageItem-portrait2').style.minHeight = 450 + 'px';
      });
    },
    toLeft() {
      if (this.startIndex > 0) {
        this.startIndex = this.startIndex - 1;
        this.endIndex = this.endIndex - 1;
        this.hotRoomShow = this.roomList.slice(this.startIndex, this.endIndex);
      }
    },
    toRight() {
      if (this.startIndex < 2) {
        this.startIndex = this.startIndex + 1;
        this.endIndex = this.endIndex + 1;
        this.hotRoomShow = this.roomList.slice(this.startIndex, this.endIndex);
      }
    },
    // 跳转
    goPage(index) {
      let router = '';
      switch (index) {
        case 1:
          router = this.$router.resolve({
            path: `/talent_main/liveTrafficMarket`
          });
          window.open(router.href, '_blank');
          break;
        case 2:
          router = this.$router.resolve({
            path: `/talent_main/bring_goods`
          });
          window.open(router.href, '_blank');
          break;
        case 3:
          router = this.$router.resolve({
            path: `/talent_main/liveSearchRoot`
          });
          window.open(router.href, '_blank');
          break;
        case 4:
          router = this.$router.resolve({
            path: `/talent_main/fans_main`
          });
          window.open(router.href, '_blank');
          break;
        case 5:
          router = this.$router.resolve({
            path: `/talent_main/star_map`
          });
          window.open(router.href, '_blank');
          break;
        case 6:
          router = this.$router.resolve({
            path: `/talent_main/search`
          });
          window.open(router.href, '_blank');
          break;
        case 7:
          router = this.$router.resolve({
            path: `/talent_main/goodsListRoot`
          });
          window.open(router.href, '_blank');
          break;
        case 8:
          router = this.$router.resolve({
            path: `/talent_main/videoListRoot`
          });
          window.open(router.href, '_blank');
          break;
        case 9:
          router = this.$router.resolve({
            path: `/talent_main/searchRoot`
          });
          window.open(router.href, '_blank');
          break;
        case 10:
          router = this.$router.resolve({
            path: `/talent_main/hot_video`
          });
          window.open(router.href, '_blank');
          break;
        case 11:
          router = this.$router.resolve({
            path: `/talent_main/hotMusic`
          });
          window.open(router.href, '_blank');
          break;
        case 12:
          router = this.$router.resolve({
            path: `/talent_main/hotTopic`
          });
          window.open(router.href, '_blank');
          break;
        case 13:
          router = this.$router.resolve({
            path: `/talent_main/live_house`
          });
          window.open(router.href, '_blank');
          break;
      }
    },
    // 实时大屏
    toScreen(id) {
      let router = this.$router.resolve({
        path: `/live/${id}`
      });
      window.open(router.href, '_blank');
    },
    // 直播详情
    toLiveDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    // 获取预告
    getYuGao() {
      let that = this;
      that.finishLoading = true;
      that.$axios
        .get('/api/live/GetHotRoomNotice', {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel01 != null) {
              that.cancel01();
            }
            that.cancel01 = c;
          })
        })
        .then(res => {
          that.getRoom();
          if (res.data.code == 0) {
            that.yugaoList = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 爆款直播间
    getRoom() {
      let that = this;
      that.$axios
        .get('/api/live/GetHotRoom', {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel02 != null) {
              that.cancel02();
            }
            that.cancel02 = c;
          })
        })
        .then(res => {
          if (res.data.code == 0) {
            that.roomList = res.data.data;
            if (that.roomList.length >= 8) {
              that.hotRoomShow = that.roomList.slice(0, 6);
            } else {
              that.hotRoomShow = that.roomList;
            }
            that.finishLoading = false;
            that.setChartsHeight();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 达人行业分布统计
    getTalentJob() {
      let that = this;
      that.$axios
        .get('/api/author/GetAuthorCategorySummary')
        .then(res => {
          if (res.data.code == 0) {
            that.jobxData = res.data.data.x.reverse();
            that.jobyData01 = res.data.data.yAuthorTotal.reverse();
            that.jobyData02 = res.data.data.yAuthorLiveTotal.reverse();
            that.jobyData03 = res.data.data.yAuthorOrderTotal.reverse();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 达人粉丝分布统计
    getTalentFans() {
      let that = this;
      that.$axios
        .get('/api/author/GetAuthorFansSummary')
        .then(res => {
          if (res.data.code == 0) {
            that.fansxData = res.data.data.x;
            that.fansyData1 = res.data.data.yAuthorTotal;
            that.fansyData2 = res.data.data.yAuthorLiveTotal;
            that.fansyData3 = res.data.data.yAuthorOrderTotal;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    goDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    goLive(id) {
      let router = this.$router.resolve({
        path: `/live/${id}`
      });
      window.open(router.href, '_blank');
    },
    // 达人画像
    getTalentDraw() {
      let that = this;
      that.$axios
        .get('/api/author/GetAuthorPersonasSummary')
        .then(res => {
          if (res.data.code == 0) {
            that.pieGenderData = res.data.data.gende;
            that.pieAgeData = res.data.data.age;
            that.pieVideoData = res.data.data.aweme;
            that.pieLiveData = res.data.data.live;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 在架商品分类
    getGoodsSum() {
      let that = this;
      that.$axios
        .get('/api/product/GetProCateSummary')
        .then(res => {
          if (res.data.code == 0) {
            that.goodsxData = res.data.data.xData;
            that.goodsY1 = res.data.data.series1; //商品总数
            that.goodsY2 = res.data.data.series2; //动销商品数
            that.goodsY3 = res.data.data.series3; //抖音浏览总量
            that.goodsY4 = res.data.data.series4; //动销商品浏览量
            that.goodsY5 = res.data.data.series5; //抖音订单量
            // console.log("goodsxData", that.goodsY1);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 直播间商品分类统计
    getGoodsLiveSum() {
      let that = this;
      that.$axios
        .get('/api/product/GetLiveProCateSummary')
        .then(res => {
          if (res.data.code == 0) {
            that.goodslivexData = res.data.data.xData;
            that.goodsliveY1 = res.data.data.series1;
            that.goodsliveY2 = res.data.data.series2;
            that.goodsliveY3 = res.data.data.series3;
            that.goodsliveY4 = res.data.data.series4;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="less" scoped>
#workbench {
  box-sizing: border-box;
  // width: 100%;
  // min-width: 1722px;
  overflow: auto;
  padding: 14px;
  padding-bottom: 0;
  // min-height: calc(100vh - 60px);
  background-color: #f1f1f1;
  //   1
  .box01 {
    display: flex;
    justify-content: space-between;
    // height: 163px;
    .box01Left {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      margin-top: 10px;
      .left01 {
        width: 25%;
        height: 163px;
        margin-right: 10px;
        padding-top: 24px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;
        p:nth-child(1) {
          text-align: center;
          font-size: 16px;
          color: #222222;
          font-weight: 600;
        }
        .iconBox01 {
          margin-top: 34px;
          display: flex;
          justify-content: center;
          align-items: center;
          .left01Item {
            cursor: pointer;
            flex: 1;
            img {
              width: 30px;
              height: 28px;
              display: block;
              margin: 0 auto;
              cursor: pointer;
              // transition: all 1s;
            }
            img:hover {
              animation-name: move;
              animation-duration: 1s;
              animation-iteration-count: 1;
            }
            // 图标晃动
            @keyframes move {
              0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg) scale(1.1);
              }
              10% {
                -webkit-transform: rotate(-6deg);
                transform: rotate(-6deg) scale(1.1);
              }
              20% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg) scale(1.1);
              }
              30% {
                -webkit-transform: rotate(-6deg);
                transform: rotate(-6deg) scale(1.1);
              }
              40% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg) scale(1.1);
              }
              50% {
                -webkit-transform: rotate(-6deg);
                transform: rotate(-6deg) scale(1.1);
              }
              60% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg) scale(1.1);
              }
              70% {
                -webkit-transform: rotate(-6deg);
                transform: rotate(-6deg) scale(1.1);
              }
              80% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg) scale(1.1);
              }
              90% {
                -webkit-transform: rotate(-6deg);
                transform: rotate(-6deg) scale(1.1);
              }
              100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg) scale(1.1);
              }
            }
            .pieIcon {
              width: 28px;
              height: 28px;
            }
            .dhIcon {
              width: 29px;
              height: 28px;
            }
            .bpIcon {
              width: 28px;
              height: 26px;
            }
            .hotVideoIcon {
              width: 26px;
              height: 28px;
            }
            .shopCartIcon {
              width: 26px;
              height: 27px;
            }
            .zfIcon {
              width: 48.5px;
              height: 47.5px;
            }
            .vs {
              width: 47.5px;
              height: 47px;
            }
            p {
              font-size: 14px;
              color: #888888;
              text-align: center;
              padding-top: 10px;
            }
          }
        }
      }
      .left01:last-child {
        margin-right: 0;
      }
      .videoItem {
        width: 26%;
        // padding-left: 5.5%;
      }
    }
    .box01Right {
      border-radius: 4px;
      width: 29%;
      background-color: #ffffff;
      .banner {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }
  }
  // 2
  .workbench_live {
    display: flex;
    justify-content: space-between;
    // margin-top: 14px;
    // left
    .workbench_live-left {
      width: 49.7%;
    }
    // right
    .workbench_live-right {
      width: 49.7%;
    }
    // 顶部的更多和直播标签
    .live-left-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      .notice {
        width: 82px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #222;
        display: flex;
        align-items: center;
        // background: url("~@/assets/shi/liveyugao.png") no-repeat;
        .notice-box {
          width: 4px;
          height: 16px;
          border-radius: 100px;
          margin-right: 6px;
          background-color: #fd7f2c;
        }
      }
      .more {
        font-size: 14px;
        color: #fd7f2c;
        cursor: pointer;
      }
    }
    // 内容区域盒子
    .live-left-content {
      display: flex;
      justify-content: space-between;
    }
    .left-content-item {
      width: 32.6%;
      height: 104px;
      display: flex;
      align-items: center;
      padding: 20px 14px;
      border-radius: 4px;
      box-sizing: border-box;
      background-color: #fff;
      cursor: pointer;
      .item-box-img {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .item-box-img2 {
        position: relative;
        img {
          border: 2px solid #fa4fa2;
          box-sizing: border-box;
        }
        .livingBox {
          width: 64px;
          height: 22px;
          border-radius: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: -6px;
          right: 0;
          background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
            linear-gradient(#ffffff, #ffffff);
          background-blend-mode: normal, normal;
          z-index: 3;
          span {
            font-size: 12px;
            font-weight: 600;
            color: #ffffff;
          }
        }
      }
      .item-box-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        overflow: hidden;
        margin-left: 8px;
        .nickname {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 600;
        }
        .nickname:hover {
          color: #ff924b;
        }
        .introduce {
          width: 100%;
          font-size: 14px;
          color: #888;
          overflow: hidden;
          margin-top: 2px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .notice-time {
          font-size: 14px;
          color: #fd7f2c;
          overflow: hidden;
          margin-top: 2px;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          img {
            width: 15px;
            height: 14px;
            vertical-align: baseline;
            margin-right: 4px;
          }
        }
        @media screen and (max-width: 1400px) {
          .introduce {
            font-size: 12px;
          }
          .notice-time {
            font-size: 13px;
          }
        }
      }
    }
    // .left-item-box {
    //   width: 100%;

    // }
  }
  // .box02 {
  //   display: flex;
  //   justify-content: space-between;
  //   height: 173px;
  //   margin-top: 20px;
  //   .box02Left {
  //     width: 87.4%;
  //     display: flex;
  //     justify-content: space-between;
  //     .left02Item {
  //       background-color: #ffffff;
  //       width: 18.9%;
  //       height: 173px;
  //       border-radius: 4px;
  //       .avatorBox {
  //         padding: 20px;
  //         display: flex;
  //         justify-content: flex-start;
  //         align-items: center;
  //         img {
  //           width: 57px;
  //           height: 57px;
  //           border-radius: 50%;
  //           border: 2px solid #fa4fa2;
  //         }
  //         .infoRight {
  //           flex: 1;
  //           text-align: left;
  //           padding-left: 12px;
  //           overflow: hidden;
  //           p {
  //             overflow: hidden;
  //             text-overflow: ellipsis;
  //             display: -webkit-box;
  //             -webkit-line-clamp: 1;
  //             -webkit-box-orient: vertical;
  //           }
  //           p:nth-of-type(1) {
  //             font-size: 16px;
  //             color: #222222;
  //             font-weight: 600;
  //           }
  //           p:nth-of-type(2) {
  //             padding-top: 4px;
  //             font-size: 14px;
  //             color: #555555;
  //           }
  //         }
  //       }
  //       .time01 {
  //         width: 85.7%;
  //         height: 64px;
  //         background-color: #fff4ed;
  //         border-radius: 4px;
  //         margin: 0 auto;
  //         .ygTitle {
  //           padding-top: 12px;
  //           display: flex;
  //           justify-content: center;
  //           align-items: center;
  //           img {
  //             width: 15px;
  //             height: 14px;
  //           }
  //           span {
  //             font-size: 14px;
  //             font-weight: 600;
  //             color: rgba(253, 127, 44, 0.7);
  //             padding-left: 8px;
  //           }
  //         }
  //         p {
  //           font-size: 18px;
  //           color: #fd7f2c;
  //           font-family: DINAlternate-Bold;
  //           text-align: center;
  //           padding-top: 3px;
  //           letter-spacing: 0 !important;
  //         }
  //       }
  //     }
  //   }
  //   .box02Right {
  //     width: 11.5%;
  //     background-color: #ffffff;
  //     position: relative;
  //     border-radius: 4px;
  //     overflow: hidden;
  //     cursor: pointer;
  //     img {
  //       width: 100%;
  //       height: 100%;
  //       border-radius: 4px;
  //       -webkit-transition: all 1s;
  //       transition: all 1s;
  //     }
  //     .toYgDetails {
  //       cursor: pointer;
  //       width: 88px;
  //       height: 32px;
  //       line-height: 32px;
  //       text-align: center;
  //       background-color: #fff6f0;
  //       border-radius: 4px;
  //       font-size: 14px;
  //       color: #fd7f2c;
  //       position: absolute;
  //       left: 50%;
  //       bottom: 14px;
  //       transform: translate(-50%, 0);
  //     }
  //   }
  //   .box02Right:hover {
  //     img {
  //       transform: scale(1.1);
  //     }
  //   }
  // }
  // 3
  .box03 {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    // height: 308px;
    margin-top: 20px;
    padding: 20px;
    .box03Left {
      width: 12.8%;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border-radius: 4px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        -webkit-transition: all 1s;
        transition: all 1s;
      }
      .moreHotBtn {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translate(-50%, 0);
        width: 110px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background-color: #fff2f6;
        border-radius: 4px;
        font-size: 14px;
        color: #fe306a;
      }
    }
    .box03Left:hover {
      img {
        transform: scale(1.1);
      }
    }
    .box03Right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;
      overflow: hidden;
      .box03Content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 10px;
        overflow: hidden;
        .box03Item:hover {
          .bgImg {
            filter: blur(5px);
          }
          .userInfoMask {
            display: none;
          }
          .livingBox01 {
            display: none;
          }
          .livingBox02 {
            opacity: 1;
          }
          .hotRoom02 {
            opacity: 1;
          }
        }
        .livingBox02 {
          opacity: 0;
        }
        .box03Item {
          box-sizing: border-box;
          cursor: pointer;
          height: 100%;
          width: 15.4%;
          border-radius: 4px;
          position: relative;
          overflow: hidden;
          border: 1px solid #e5e5e5;
          .bgImg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
          .livingBox {
            width: 71px;
            height: 22px;
            background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
              linear-gradient(#ffffff, #ffffff);
            background-blend-mode: normal, normal;
            border-radius: 0px 4px 0px 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 3;
            span {
              font-size: 12px;
              font-weight: 600;
              color: #ffffff;
            }
          }
          .userInfoMask {
            width: 100%;
            height: 130px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
            .userInfo {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              position: absolute;
              left: 0;
              bottom: 10px;
              img {
                width: 41px;
                height: 41px;
                border-radius: 50%;
                margin-left: 10px;
                border: 1px solid #e5e5e5;
              }
              .userRight {
                margin-left: 10px;
                p:nth-of-type(1) {
                  font-size: 14px;
                  color: #ffffff;
                  font-weight: 600;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }
                p:nth-of-type(2) {
                  font-size: 14px;
                  color: rgba(255, 255, 255, 0.7);
                }
              }
            }
          }

          .hotRoom02 {
            // width: 100%;
            // height: 100%;
            width: 209px;
            height: 262px;
            // overflow: auto;
            // display: none;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            .userBox02 {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 15px;
              img {
                width: 31px;
                height: 31px;
                margin-left: 10px;
                border-radius: 50%;
              }
              p {
                font-size: 14px;
                color: #ffffff;
                font-weight: 600;
                padding-left: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
            }
            .saleNum {
              margin-top: 30px;
              p:nth-of-type(1) {
                text-align: center;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.7);
              }
              p:nth-of-type(2) {
                text-align: center;
                font-size: 18px;
                color: #ffffff;
                span {
                  font-size: 30px;
                  color: #ffffff;
                  font-family: DINAlternate-Bold;
                }
              }
            }
            .numBox {
              width: 100%;
              display: flex;
              margin-top: 20px;
              .NumItem01 {
                width: 50%;
                p {
                  text-align: center;
                }
                p:nth-of-type(1) {
                  font-size: 18px;
                  color: #ffffff;
                  font-family: DINAlternate-Bold;
                }
                p:nth-of-type(2) {
                  font-size: 12px;
                  color: rgba(255, 255, 255, 0.7);
                }
              }
            }
            .btnBox {
              width: 100%;
              display: flex;
              justify-content: center;
              margin-top: 20px;
              .btnItem {
                width: 41%;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color: #fd7f2c;
                border-radius: 4px;
                font-size: 14px;
                color: #ffffff;
              }
              .btnItem01 {
                background-color: #fd7f2c;
                margin-left: 12px;
              }
            }
          }
        }
      }
      .arrowImg {
        width: 16px;
        height: 30px;
        cursor: pointer;
      }
    }
  }
  // 4
  .box04 {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .box04Item {
      width: 32.5%;
      // height: 173px;
      // object-fit: cover;
      background-color: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }
  }
  // 5
  .box05 {
    box-sizing: border-box;
    width: 100%;
    // background-color: #fff;
    // margin-top: 20px;
    // padding: 20px;
    position: relative;
    .refreshTime {
      font-size: 14px;
      color: #888888;
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      top: 38px;
      z-index: 99;
      .whatImg {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
    /deep/.el-tabs__content {
      overflow-x: auto;
      border-radius: 4px;
    }
    .tabLable {
      position: relative;
      .whatImg {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 5px;
        right: -17px;
      }
    }
    .box05_tab-pane {
      min-width: 1600px;
    }

    .iconImg {
      margin-left: 0 !important;
    }
    .iconImg-box {
      display: inline-block;
      width: 4px;
      height: 16px;
      border-radius: 20px;
      background-color: #fd7f2c;
    }
    .barDiv {
      width: 100%;
      height: 460px;
      position: relative;
      // margin-top: 45px;
      .watermark {
        width: 63px;
        height: 22px;
        position: absolute;
        bottom: 60px;
        left: 88px;
        // z-index: 9999;
      }
    }
    .barHorBox {
      width: 95%;
      height: 90%;
      overflow: auto;
      // border: solid 1px #e5e5e5;
      margin-top: 17px;
    }
    .watermark-box {
      .watermark {
        width: 63px;
        height: 22px;
        position: absolute;
        bottom: 60px;
        left: 88px;
      }
    }
    .barHor {
      width: 100%;
      height: 1054px;
      border-radius: 4px;
      // margin-top: 17px;
    }
    .talentFansBar {
      position: relative;
      width: 100%;
      height: 50%;
      // margin-top: 36px;
      .watermark {
        width: 63px;
        height: 22px;
        position: absolute;
        bottom: 60px;
        left: 78px;
      }
    }
    .talentPie {
      width: 100%;
      height: 200px;
      // position: relative;
      .watermark {
        width: 63px;
        height: 22px;
        position: absolute;
        bottom: 55px;
        left: 78px;
      }
    }
    .live-watermark {
      .watermark {
        width: 63px;
        height: 22px;
        position: absolute;
        bottom: 60px;
        left: 164px;
      }
    }
    .paneDiv {
      width: 100%;
      // min-height: 400px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      // padding-left: 20px;
      background-color: #fff;
      .sageItem {
        width: 50%;
        height: 100%;
        margin-top: 18px;
        overflow: hidden;
        position: relative;
        .titleBox {
          margin-left: 20px;
          span {
            color: #222222;
            font-weight: 600;
            padding-left: 6px;
          }
        }
      }
      .sageItem:nth-child(1) {
        width: 40%;
      }
      .sageItem:nth-child(2) {
        width: 60%;
      }
      .sageItem-portrait1 {
        width: 30% !important;
      }
      .sageItem-portrait2 {
        width: 70% !important;
        display: flex;
        .sageItem3 {
          width: 50%;
        }
        .sageItem4 {
          width: 50%;
        }
      }
      .top-switch {
        width: 100%;
        margin-top: 20px;
        position: relative;
        .top-switch-wrap {
          position: absolute;
          right: 16px;
          display: flex;
          cursor: pointer;
          font-size: 14px;
          color: #555555;
          box-sizing: border-box;
          z-index: 22;
          div:first-child {
            border: 1px solid #e5e5e5;
            border-right: none;
            padding: 9px 14px;
            border-radius: 4px 0px 0px 4px;
          }
          div:last-child {
            border: 1px solid #e5e5e5;
            border-left: none;
            padding: 9px 14px;
            border-radius: 0px 4px 4px 0px;
          }
          .native {
            border: none !important;
            background-color: #fff1e8;
            color: #fd7f2c;
            // border-radius: 4px 0px 0px 4px;
          }
        }
      }
    }
  }
  .whatImg01 {
    width: 14px;
    height: 14px;
    margin-left: 8px;
    cursor: pointer;
  }
}
.tip-popup {
  width: 420px;
  font-size: 12px;
  line-height: 18px;
  p {
    font-size: 14px;
    font-weight: 600;
    // color: #555;
    margin-top: 10px;
  }
  p:first-child {
    margin-top: 0;
  }
}
[h100] {
  height: 100%;
}
.finishLoading {
  position: relative;
  // top:50% !important;
  height: 96vh;
  .el-loading-mask {
    background-color: transparent !important;
  }
}
</style>
